<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
ul{margin:0;padding:0;list-style:none;}
a{text-decoration:none;}
body{background:pink;}
div{background: #000 url(img2/bgL.jpg) no-repeat;}
ul{background:url(img2/bgR.jpg) no-repeat right 0; padding:0px 9px;}
div,ul,li,a,span{float:left;}
a{background:url(img2/btnM.png) repeat-x;}
li{background:url(img2/btnL.png) no-repeat;}
span{background:url(img2/btnR.png) no-repeat right 0;height:20px;padding:5px 30px;color:#fff;font-size:14px;}
a:hover,.active{background:url(img2/btnM-b.jpg) repeat-x;}
a:hover li,.active li{background:url(img2/btnL-b.jpg) no-repeat;}
a:hover span,.active span{background:url(img2/btnR-b.jpg) no-repeat right 0;}
</style>
</head>
<body>
<div>
  <ul>
    <a href="img2导航按钮.html">
      <li>
        <span>Home</span>
      </li>
    </a>
    <a href="img2导航按钮 - 2.html">
      <li>
        <span>About us</span>
      </li>
    </a>
    <a href="img2导航按钮 - 3.html">
      <li>
        <span>Contact us</span>
      </li>
    </a>
    <a href="img2导航按钮 - 4.html" class="active">
      <li>
        <span>Products</span>
      </li>
    </a>
  </ul>
</div>
</body>
</html>
